<style>
    .panel {
        width: 1100px;
        margin: auto;
        background: #f1f4f6;
    }

    .allback {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .frist-content {
        margin-top: 54px;
        margin-bottom: 20px;
    }

    .bannerimg {
        width: 100%;
        height: auto;
        cursor: pointer;
    }

    .frist-content .frist-content-item1 {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        height: 200px;
    }

    .frist-content .frist-content-item1 .item {
        width: 260px;
        background: #fff;
        box-shadow: 0 6px 18px 8px rgba(21, 27, 41, 0.06), 0 3px 10px -4px rgba(21, 27, 41, 0.08);
        border-radius: 10px;
    }

    .frist-content .frist-content-item1 .item .new-item-title {
        height: 51px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .frist-content .frist-content-item1 .item .new-item-title .new-item-cricle {
        width: 7px;
        height: 7px;
        background: #1a96ff;
        border-radius: 4px;
    }

    .frist-content .frist-content-item1 .item .new-item-title .new-item-tip {
        margin-left: 6px;
        height: 25px;
        font-size: 16px;
        font-weight: 500;
        color: #111;
        line-height: 25px;
    }

    .frist-content .frist-content-item1 .item .new-item-devider {
        height: 1px;
        background: hsla(0, 0%, 91.4%, .8);
    }

    .frist-content .frist-content-item1 .item .item-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .frist-content .frist-content-item1 .item .item-content .img-excel {
        margin-top: 18px;
        width: 70px;
        height: 70px;
    }

    .frist-content .frist-content-item1 .item .item-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .frist-content .frist-content-item1 .item .item-content .new-item-content-text {
        height: 22px;
        font-size: 14px;
        font-weight: 500;
        color: #4874b7;
        line-height: 22px;
    }
    .frist-content .frist-content-item1 .item .item-one {
        width: 130px;
        display: flex;
        align-items: center;
        margin-top: 20px;
        margin-left: 20px;
    }
    .frist-content .frist-content-item1 .item .item-one .img-wx {
        width: 40px;
        height: 40px;
    }
    .frist-content .frist-content-item1 .item .item-one .text-wx {
        height: 30px;
        font-size: 22px;
        font-weight: 500;
        color: #333;
        line-height: 30px;
        margin-left: 10px;
    }
    .frist-content .frist-content-item1 .item .item-two {
        text-align: center;
        height: 53px;
        font-size: 38px;
        font-weight: 700;
        color: #111;
        line-height: 53px;
        margin-top: 2px;
    }
    .frist-content .frist-content-item1 .item .item-three {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .frist-content .frist-content-item1 .item .item-three .item-three-tip1 {
        text-align: right;
        line-height: 20px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #999;
    }
    .frist-content .frist-content-item1 .item .item-three .item-three-tip2 {
        width: 3em;
        text-align: left;
        line-height: 20px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #111;
        white-space: nowrap;
    }
    .frist-content .frist-content-item1 .item .item-three {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .frist-content .frist-content-item1 .item .item-three .item-three-tip1 {
        text-align: right;
        line-height: 20px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #999;
    }
    .frist-content .frist-content-item1 .item .item-three .item-three-tip2 {
        width: 3em;
        text-align: left;
        line-height: 20px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #111;
        white-space: nowrap;
    }
    .frist-content .frist-content-item2 {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        height: 320px;
    }
    .frist-content .frist-content-item2 .item1 {
        width: 800px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 6px 18px 8px rgba(21, 27, 41, 0.06), 0 3px 10px -4px rgba(21, 27, 41, 0.08);
    }
    .chart-button {
        width: 216px;
        display: flex;
        height: 32px;
        align-items: center;
    }
    .chart-button .com-button-click {
        cursor: pointer;
        width: 50%;
        background: #1a96ff;
        box-shadow: 0 2px 5px 0 rgba(24, 29, 48, 0.21);
        text-align: center;
        border: 1px solid #1a96ff;
        height: 28px;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        line-height: 28px;
    }
    .chart-button .com-button {
        cursor: pointer;
        width: 50%;
        background: hsla(0,0%,100%,.16);
        border: 1px solid #ebebeb;
        text-align: center;
        height: 28px;
        font-size: 14px;
        font-weight: 400;
        color: #999;
        line-height: 28px;
    }

    .item-display {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 15px;
    }
    .frist-content .frist-content-item2 .item .item-title {
        margin-top: 20px;
        margin-left: 20px;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #333;
        line-height: 28px;
    }
    .frist-content .frist-content-item2 .item .item-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .frist-content .frist-content-item2 .item .item-content .img-erweima {
        margin-top: 26px;
        width: 135px;
        height: 135px;
    }
    .frist-content .frist-content-item2 .item .item-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .frist-content .frist-content-item2 .item .item-content .item-content-text {
        height: 48px;
        font-size: 14px;
        font-weight: 500;
        color: #777;
        line-height: 20px;
        margin-top: 30px;
        margin-left: 35px;
        margin-right: 35px;
        margin-bottom: 20px;
    }
    .frist-content .frist-content-item2 .item {
        width: 260px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 6px 18px 8px rgba(21, 27, 41, 0.06), 0 3px 10px -4px rgba(21, 27, 41, 0.08);
    }
    #echart{

        margin: auto;
        margin-top: 30px;
    }
    #c-pid{
        padding-right: 20px;
    }
    .btn-img{
        padding: 0;
    }
    .btn-img img{
        border-radius: 10px;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div class="frist-body">
                        <div class="allback">
                            <div class="frist-content"> <div class="btn btn-img btn-imgs" ><img
                                    src="__CDN__/assets/addons/kupay/img/banner1.png"
                                    class="bannerimg" ></div>
                                <div class="frist-content-item1">
                                    <div class="item">
                                        <div class="new-item-title">
                                            <div class="new-item-cricle"></div>
                                            <div class="new-item-tip">Excel秒变工资条</div>
                                        </div>
                                        <div class="new-item-devider"></div>
                                        <div class="item-content"><a href="javascript:;" class="btn-imgs"><img
                                                src="__CDN__/assets/addons/kupay/img/adds.png"
                                                class="img-excel"></a></div>
                                        <div class="item-content"><a href="javascript:;" class="btn-imgs"><span
                                                class="new-item-content-text">新建工资条</span></a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div style="display: flex;">
                                            <div class="item-one"><img
                                                    src="__CDN__/assets/addons/kupay/img/weixin.png"
                                                    class="img-wx"><span
                                                    class="text-wx">微信</span></div>
                                        </div>
                                        <div class="item-two">{$weixn1}</div>
                                        <div class="item-three">
                                            <div class="item-three-tip1">发送成功：</div>
                                            <div class="item-three-tip2">{$weixn2}</div>
                                        </div>
                                        <div class="item-three" style="margin-top: 8px;">
                                            <div class="item-three-tip1">发送失败：</div>
                                            <div class="item-three-tip2">{$weixn3}</div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div style="display: flex;">
                                            <div class="item-one"><img
                                                    src="__CDN__/assets/addons/kupay/img/qiye.png"
                                                    class="img-wx"><span
                                                    class="text-wx">短信</span></div>
                                        </div>
                                        <div class="item-two">{$duanxin1}</div>
                                        <div class="item-three" style="margin-top: 8px;">
                                            <div class="item-three-tip1">发送成功：</div>
                                            <div class="item-three-tip2">{$duanxin2}</div>
                                        </div>
                                        <div class="item-three">
                                            <div class="item-three-tip1">发送失败：</div>
                                            <div class="item-three-tip2">{$duanxin3}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="frist-content-item2">
                                    <div class="item1">
                                        <div
                                                style="display: flex; margin-left: 40px; margin-right: 50px; margin-top: 20px; justify-content: space-between;">
                                            <div class="chart-button">
                                                <div class="left-button com-button-click " id="types-btn1" data-info="1">员工数量</div>
                                                <div class="right-button com-button" id="types-btn2" data-info="2">实发工资</div>
                                            </div>
                                            <input type="hidden" id="types" value="1">
                                            <div class="methodchose">
                                                <select id="c-pid" data-rule="required" class="form-control selectpicker"
                                                        name="type">
                                                    <option value="1">微信</option>
                                                    <option value="4">短信</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div id="echart" class="btn-refresh" style="height:200px;width:640px;"></div>
                                    </div>
                                    <div class="item">
                                        <div class="item-display">
                                            <div class="item-title">工资服务号</div>
                                        </div>
                                        <div class="item-content"><img
                                                src="{$weixinconfig.image|default=''}"
                                                class="img-erweima"></div>
                                        <div class="item-content"><span
                                                class="item-content-text"> 将微信公众号推送给您的员工 可以实时查看工资详情哦～ </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="el-dialog__wrapper" style="display: none;">
                            <div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog"
                                 style="margin-top: 15vh; width: 550px;">
                                <div class="el-dialog__header"><span class="el-dialog__title"></span>
                                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i
                                            class="el-dialog__close el-icon el-icon-close"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
